import type { InputRef, SelectProps } from 'antd';
import { Button, Form, Input, Popover, Tag, Tooltip } from 'antd';
import React, { useRef } from 'react';

import PlusOutlined from '@/assets/icons/plus.svg';
import { colors } from '@/config/theme';

interface TagEditorProps {
  value?: SelectProps['options'];
  onChange?: (value: SelectProps['options']) => void;
}

export const EnumEditor = memo<TagEditorProps>((props) => {
  const options = props.value || [];
  const inputRef = useRef<InputRef>(null);
  const [form] = Form.useForm();
  const [err, setErr] = useState('');
  const [open, setOpen] = useState(false);

  const handleClose = (removedTag: any) => {
    const newTags = options.filter((tag) => tag.value !== removedTag);
    props.onChange?.(newTags);
  };

  const tagChild = options.map?.((option) => {
    return (
      <Tooltip key={option.value} title={`枚举值: ${option.label}`}>
        <Tag
          className="mr-0"
          closable
          color="gold"
          onClose={(e) => {
            e.preventDefault();
            handleClose(option.value);
          }}>
          {option.label}
        </Tag>
      </Tooltip>
    );
  });

  const handleConfirm = () => {
    const { label, value } = form.getFieldsValue();
    if (!label) {
      setErr('请输入枚举描述');
      return;
    }

    if (!value) {
      setErr('请输入枚举值');
      return;
    }
    const list = options.filter((item) => item.value !== value && item.label !== label);

    props.onChange?.([...list, { label, value }]);

    closePopover();
  };

  const closePopover = () => {
    setOpen(false);
    form.resetFields();
    setErr('');
  };

  const tagPlusStyle: React.CSSProperties = {
    background: colors.gray[50],
    borderStyle: 'dashed'
  };

  return (
    <>
      {options?.length > 0 && <div className="flex gap-4 gap-x-8 flex-wrap mb-8">{tagChild}</div>}
      <Popover
        open={open}
        placement="bottom"
        content={
          <div className="add-enum-popover pb-12">
            <div className="text-16">新增枚举</div>
            <Form form={form} className="pt-12">
              <div className="flex items-center gap-12">
                <Form.Item required noStyle name="label">
                  <Input ref={inputRef} type="text" size="small" className="w-120" placeholder="请输入枚举描述" />
                </Form.Item>
                <Form.Item required noStyle name="value">
                  <Input type="text" size="small" className="w-120" placeholder="请输入枚举值" />
                </Form.Item>
              </div>
              {err && <div className="text-red-500 text-12">{err}</div>}
              <div className="flex items-center justify-end gap-12 mt-12">
                <Button onClick={closePopover} size="small">
                  取消
                </Button>
                <Button onClick={handleConfirm} type="primary" size="small">
                  确认
                </Button>
              </div>
            </Form>
          </div>
        }>
        <Tag onClick={() => setOpen(true)} style={tagPlusStyle} className="flex w-82 items-center cursor-pointer py-2">
          <PlusOutlined width={16} height={16} /> 新增枚举
        </Tag>
      </Popover>
    </>
  );
});
